<template>
	<view>
		<view>你好，{{loginUser.name}}</view>
		<view>电话：{{loginUser.mobile}}</view>
		<view>全局参数：{{text}}</view>
		<!-- #ifdef MP -->
		<view v-if="!isLogin">
		<button @click="handleLogin">登录</button>
		<button @click="handleUserProfile">获取用户信息</button>
		</view>
		<view v-else>
			<image :src="loginUser.avatarUrl"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue";

	onLoad(() => console.log("个人中心页：onLoad"));
	onShow(() => console.log("个人中心页面：onShow"));
	onReady(() => console.log("个人中心页面：onReady"));

	const loginUser = reactive({});
	const isLogin = ref(false);

	// 异步
	// uni.getStorage({
	// 	key: "loginUser",
	// 	success({data}) {
	// 		console.log("获取结果：",data);
	// 		Object.assign(loginUser,data);
	// 	}
	// })

	// 同步
	const result = uni.getStorageSync("loginUser");
	if (result) {
		console.log("获取结果：", result);
		Object.assign(loginUser, result);
	}
	
	const text = getApp().globalData.text;
	
	function handleLogin() {
		uni.login({
			success(result) {
				console.log("result = ",result);
				// 在result中获取到code，调用“我们”的登录接口
				// 获取我们的token，存储在本地存储中
				// uni.setStorage({
				// 	key: "token",
				// 	data: "token"
				// })
			}
		})
	}
	
	
	function handleUserProfile() {
		// 该接口只能通过按钮点击触发
		uni.getUserProfile({
			desc: "该应用要获取用户信息",
			success(res) {
				isLogin.value = true;
				console.log("获取用户信息：",res.userInfo);
				Object.assign(loginUser,res.userInfo);
				uni.setStorage({
					key:"loginUser",
					data: res.userInfo,
				})
			}
		})
	}
</script>

<style>

</style>
